<script setup lang='ts'>
    import {computed, ref, onMounted} from 'vue'
    import {
        NTag,
        NSelect,
        NDatePicker,
        NFormItem,
        NInput,
        NModal,
        NTabPane,
        NTabs,
        useMessage,
        NTable,
        NPagination,
        NForm,
        NButton,
        NAvatar
    } from 'naive-ui'
    import {SvgIcon} from '@/components/common'
    import {t} from '@/locales';
    import {UserInfo} from "@/typings/user"
    import { useUserStore } from '@/store'
    const userStore = useUserStore()
    import { useRouter,useRoute } from 'vue-router'
    import {getUserInfo,loginOut} from "@/api/user"
    import defaultAvatar from '@/assets/avatar.jpg'
    const router = useRouter()

    async function userLoginOut() {
        await loginOut()
        emit('update:visible', false)
        userStore.resetUserInfo()
        userInfo.value = Object.create(null)
        router.push('/login')
    }

    const userInfo = computed(() => userStore.userInfo)

    interface Props {
        visible: boolean,
    }
    interface Emit {
        (e: 'update:visible', visible: boolean): void
    }

    const props = defineProps<Props>()

    const emit = defineEmits<Emit>()

    const show = computed({
        get() {
            return props.visible
        },
        set(visible: boolean) {
            emit('update:visible', visible)
        },
    })
    function showContent() {
        var content = document.getElementById("hiddenContent");
        var button = document.getElementById("showButton");
        if (content.style.display === "none") {
            content.style.display = "block";
            button.innerHTML = "点击隐藏";
        } else {
            content.style.display = "none";
            button.innerHTML = "点击查看";
        }
    }

</script>

<template>
	<NModal v-model:show="show" title="个人中心" style="width: 100%; max-width: 900px;" preset="card">
		<div v-if=" userInfo && userInfo.id" class="flex flex-col justify-center items-center bg-gray-100 dark:bg-[#25272d]  p-5 rounded-lg shadow-lg">
			<div class="text-2xl text-primary self-start mb-14 flex justify-between w-full"><span></span>
				<button @click="userLoginOut" class="n-button n-button--error-type n-button--medium-type" tabindex="0" type="button"
								style="--n-bezier: cubic-bezier(.4, 0, .2, 1);
								--n-bezier-ease-out: cubic-bezier(0, 0, .2, 1);
								--n-ripple-duration: .6s; --n-opacity-disabled: 0.38;
								--n-wave-opacity: 0.8; font-weight: 400; --n-color: rgba(255, 255, 255, .08);
								--n-color-hover: rgba(255, 255, 255, .12); --n-color-pressed: rgba(255, 255, 255, .08);
								--n-color-focus: rgba(255, 255, 255, .12); --n-color-disabled: rgba(255, 255, 255, .08);
								--n-ripple-color: #0000; --n-text-color: #e88080; --n-text-color-hover: #e88080;
								--n-text-color-pressed: #e88080; --n-text-color-focus: #e88080;
								--n-text-color-disabled: #e88080; --n-border: 1px solid #e88080;
								--n-border-hover: 1px solid #e98b8b; --n-border-pressed: 1px solid #e57272;
								--n-border-focus: 1px solid #e98b8b; --n-border-disabled: 1px solid #e88080;
								--n-width: initial; --n-height: 34px; --n-font-size: 14px; --n-padding: 0 14px;
								--n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"><!----><!---->
					<span class="n-button__content"> 退出登录 </span>
					<div aria-hidden="true" class="n-base-wave"></div>
				</button>
			</div>

			<div class="flex flex-col items-center space-y-3">
				<div class="n-avatar shadow-lg">
					<NAvatar @click="showUserCenter"
									 size="large"
									 round
									 src="/src/assets/avatar.jpg"
									 :fallback-src="defaultAvatar"/>
				</div>
				<b class="mt-3 text-lg text-[#95aac9]">账号：&nbsp;{{userInfo.account}}</b>
				<span class="text-blue-400">昵称：&nbsp;{{userInfo.username}}</span>
				<div class="text-[#95aac9] px-4">蓝猫AI，智能提升效率，让工作更轻松，生活更美好！🚀🌟💡🎯🔝</div>
			</div>
			<div class="self-start mt-16">
				<div class="text-2xl text-blue-600">账号信息</div>
<!--				<div class="flex items-center space-x-4 pl-3 mt-3">-->
<!--					<span class="w-40 text-blue-600 ">model-3.5-turbo次数:</span>-->
<!--					<div class="  text-[#95aac9]">{{userInfo.gptApiTokenVo.visitNumber}} 次</div>-->
<!--				</div>-->
				<div class="flex items-center space-x-4 pl-3 mt-3">
					<span class="w-40 text-blue-600">剩余金额:</span>
					<div class=" text-[#95aac9]">{{userInfo.gptApiTokenVo.balanceStr}}美元</div>
				</div>
				<div class="flex items-center space-x-4 pl-3 mt-3">
					<span class="w-40 text-blue-600">我的token:</span>
					<div class=" text-[#95aac9]" id="hiddenContent" style="display: none;">{{userInfo.gptApiTokenVo.token}}</div>
					<button id="showButton" @click="showContent">点击查看</button>
				</div>
			</div>
		</div>
	</NModal>
</template>
